<script setup>
import {
  LoginOutlined,
  FallOutlined,
  RiseOutlined,
  BarChartOutlined,
  ScheduleOutlined,
  ExclamationCircleOutlined,
  UserAddOutlined,
} from "@ant-design/icons-vue";
import { onMounted, reactive, h, watch, ref, computed } from "vue";
import { useRouter } from "vue-router";
import { useAccountStore } from "@/stores/account.js";
import { changePrograme } from "@/service/services.js";
import { message } from "ant-design-vue";

const account = useAccountStore();
const router = useRouter();
const options = computed(() => account.programes);
const state = reactive({
  collapsed: false,
  selectedKeys: ["/main/inbound"],
  openKeys: ["sub1"],
  preOpenKeys: ["sub1"],
  currentPrograme: account.currentPrograme,
});
// const items = reactive([
// 	{
// 		key: '/main/inbound',
// 		label: '入库',
// 		title: '入库',
// 		icon: () => h(FallOutlined)
// 	},
// 	{
// 		key: '/main/outbound',
// 		label: '出库',
// 		title: '出库',
// 		icon: () => h(RiseOutlined)
// 	},
// 	{
// 		key: '/main/product',
// 		label: '产品信息',
// 		title: '产品信息',
// 		icon: () => h(ScheduleOutlined)
// 	},
// 	{
// 		key: '/main/statistics',
// 		label: '库存统计',
// 		title: '库存统计',
// 		icon: () => h(BarChartOutlined)
// 	},
// 	{
// 		key: '/main/forewarning',
// 		label: '超量预警',
// 		title: '超量预警',
// 		icon: () => h(ExclamationCircleOutlined)
// 	},
// 	{
// 		key: '/main/account',
// 		label: '账号管理',
// 		title: '账号管理',
// 		icon: () => h(UserAddOutlined)
// 	}
// ]);
const handleClick = (i) => {
  router.push(i.key);
};
watch(
  () => state.openKeys,
  (_val, oldVal) => {
    state.preOpenKeys = oldVal;
  },
);
// const toggleCollapsed = () => {
// 	state.collapsed = !state.collapsed;
// 	state.openKeys = state.collapsed ? [] : state.preOpenKeys;
// };
const logout = () => {
  account.menuList = [];
  account.selectedKeys = ["/"];
  sessionStorage.clear();
  window.location.replace("/");
};

const changeProgrames = (i) => {
  account.spinning = true;
  changePrograme({
    account: account.account,
    programe: i,
  })
    .then((res) => {
      account.currentPrograme = i;
      account.spinning = false;
    })
    .catch((err) => {
      account.spinning = false;
      message.error(err);
    });
};
</script>

<template>
  <a-spin :spinning="account.spinning" wrapperClassName="spin" size="large">
    <a-layout
      :style="{
        width: '100%',
        overflow: 'auto',
        position: 'fixed',
        left: 0,
        top: 0,
        bottom: 0,
      }"
    >
      <!-- <a-layout-sider
			width="200"
			:style="{ height: '100vh' }"
			v-model:collapsed="state.collapsed"
			collapsible
		> -->
      <a-layout-sider
        width="200"
        :style="{ height: '100vh', background: '#fff' }"
      >
        <div class="logo">LOGO</div>
        <a-menu
          v-model:selectedKeys="account.selectedKeys"
          mode="inline"
          theme="light"
          :items="account.menuList"
          @click="handleClick"
        ></a-menu>
      </a-layout-sider>
      <a-layout style="padding: 0 24px 24px">
        <!-- <a-breadcrumb style="margin: 16px 0">
				<a-breadcrumb-item>Home</a-breadcrumb-item>
				<a-breadcrumb-item>List</a-breadcrumb-item>
				<a-breadcrumb-item>App</a-breadcrumb-item>
			</a-breadcrumb> -->
        <section class="top">
          <a-select
            v-model:value="state.currentPrograme"
            size="middle"
            style="width: 200px; margin-right: 20px"
            @change="changeProgrames"
          >
            <a-select-option :key="i.id" v-for="i in options" :value="i">{{
              i
            }}</a-select-option>
          </a-select>
          <section
            style="cursor: pointer; display: flex; align-items: center"
            @click="logout"
          >
            <LoginOutlined style="font-size: 20px; margin-right: 5px" />
            <span>退出</span>
          </section>
        </section>
        <a-layout-content
          id="main"
          :style="{
            background: '#fff',
            padding: '24px',
            margin: 0,
            minHeight: '280px',
            position: 'relative',
          }"
        >
          <router-view />
        </a-layout-content>
      </a-layout> </a-layout
  ></a-spin>
</template>

<style scoped>
.spin {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo {
  width: auto;
  height: 31px;
  margin: 16px;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.top {
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  cursor: pointer;
}
</style>
